<script setup>
import { inject, ref } from "vue";
import { userqueryUser } from "@/services/user";
import { negCreate } from "@/services/pay";
import { negUpPageApi } from "@/services/order";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Verify from "@/pages/components/verify/verify.vue";
import { formatPrice } from "@/utils/formatPrice";
const order_id = ref("");

onLoad((e) => {
  order_id.value = e.order_id ? e.order_id : "";
  negUpPageFun();
});
const isselsect = ref(false);
const userid = ref("");
const userobj = ref({});

//验证码
const sliderVerify = ref(null);

const success = async (data) => {
  sliderVerify.value.hide();
  setTimeout(async () => {
    try {
      let res = await userqueryUser({
        phone: userid.value,
        captchaType: "blockPuzzle",
        captchaVerification: data.captchaVerification,
      });
      if (res.code == 200) {
        userobj.value = res.data;
        uni.showToast({
          title: "查询成功",
          icon: "success",
        });
      } else {
        uni.showToast({
          title: res.info,
          icon: "error",
        });
      }
    } catch (e) {
      uni.showToast({
        title: e.info,
        icon: "error",
      });
    }
  }, 0);

  // this.code(data);
};

// neg_user_id
const getCode = async () => {
  if (userid.value.length != 11) {
    return;
  }
  sliderVerify.value.show();
};
const bffun = async () => {
  if (!userobj.value.uid) {
    uni.showToast({
      title: "请先查询用户",
      icon: "none",
    });
    return;
  }

  try {
    let res = await negCreate({
      order_id: order_id.value,
      neg_user_id: userobj.value.uid,
    });
    if (res.code == 200) {
      userobj.value = res.data;
      uni.showToast({
        title: "已发送代付请求",
        icon: "success",
      });
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/mine/proxyPayment?type=1",
        });
      }, 1500);
    } else {
      uni.showToast({
        title: res.info,
        icon: "error",
      });
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "error",
    });
  }
};

const helpMe = async (uid) => {
  try {
    let res = await negCreate({
      order_id: order_id.value,
      neg_user_id: uid,
    });
    if (res.code == 200) {
      uni.showToast({
        title: "已发送代付请求",
        icon: "success",
      });
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/mine/proxyPayment?type=1",
        });
      }, 1500);
    } else {
      uni.showToast({
        title: res.info,
        icon: "error",
      });
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "error",
    });
  }
};

const negUpPageData = ref({});
const negUpPageFun = async () => {
  try {
    let res = await negUpPageApi({ order_id: order_id.value });
    if (res.code == 200) {
      negUpPageData.value = res.data;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "error",
    });
  }
};

const change = (e) => {
  if (String(e).length == 11) {
    isselsect.value = true;
  } else {
    isselsect.value = false;
  }
};
</script>

<template>
  <view class="content">
    <view class="content-top">
      <view class="content-num"
        >¥{{ formatPrice(negUpPageData.total_price) }}</view
      >
      <view class="content-time">
        <!-- {{ negUpPageData.close_time }} -->
        <text
          >剩余支付时间：<up-count-down
            :time="
              negUpPageData.close_time ? negUpPageData.close_time * 1000 : 0
            "
            format="HH:mm:ss"
            autoStart
            millisecond
          ></up-count-down>
        </text>
      </view>
    </view>
    <view class="content-phone">
      <view class="content-phone-title"> 手机号查找帮付人 </view>
      <view class="content-phone-input">
        <up-input
          placeholder="输入对方手机号，请他代付"
          v-model="userid"
          @change="change"
        >
          <template #suffix>
            <view
              class="pay-cx-bt"
              :class="isselsect ? 'selectpay-cx-bt' : ''"
              @tap="getCode"
              size="mini"
              >查询</view
            >
          </template>
        </up-input>
      </view>

      <view class="pay-userobj" v-if="userobj.uid">
        <view class="pay-userobj-icon">
          <image :src="userobj.avatar" mode="" />
        </view>
        <view class="pay-userobj-info">
          <text class="pay-userobj-info-name">{{ userobj.nickname }}</text>
          <text class="pay-userobj-info-phone">{{ userobj.phone }}</text>
        </view>
      </view>
      <view class="pay-bt">
        <view @click="bffun" class="pay-bt-info">发送帮付请求</view>
      </view>
      <view class="pay-list">
        <view
          class="pay-list-title"
          v-if="
            negUpPageData &&
            negUpPageData.neg_user &&
            negUpPageData.neg_user.length > 0
          "
          >帮付好友</view
        >
        <view
          class="pay-list-title-item"
          v-for="(item, index) in negUpPageData && negUpPageData.neg_user"
          :key="index"
        >
          <view class="pay-list-title-item-phone">{{ item.user.phone }}</view>
          <view class="pay-list-title-item-pay" @click="helpMe(item.uid)"
            >帮我付</view
          >
        </view>
      </view>
    </view>
  </view>

  <Verify
    @success="success"
    :captchaType="'blockPuzzle'"
    :imgSize="{ width: '330px', height: '155px' }"
    ref="sliderVerify"
  ></Verify>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
